import { useEffect, useRef, useState } from 'react';
import { Drawer, Spin, message } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { DetailDrawerInfoView } from './DetailDrawerInfoView';
import { getKeyRouter } from '@/utils';
import Cls from 'classnames';
import '../common/style.less';
import { TipsErrorModalNew } from '@/components/TipsErrorModalNew';
import { getTempByIdService } from '../services';

// const { Panel } = Collapse;
// const activeKeys = ['templDetailBasics', 'tempDetailCheck'];

const tempContractCheckDomID = `tempContract-${getKeyRouter()}`;

export const DetailDrawer: React.FC<TempContractManageAPI.IDetailDrawer> = ({
  onClose,
  isShowDetail,
  recordObj,
  curRes,
  reloadManage,
}) => {
  // const prefixCls = 'tempcontract-detail-';

  /** 申请页ref */
  const tipErrorModalRef: any = useRef();

  /** 折叠面板KEY */
  // const [activeKey, setActiveKey] = useState<Array<string>>([]);

  /** 是否打开审核抽屉 */
  // const [checkDrawerBool, setCheckDrawerBool] = useState<boolean>(false);

  /** 是否打开发布弹框 */
  const [publishModalBool, setPublishModalBool] = useState<boolean>(false);

  /** 打开抽屉 */
  // useEffect(() => {
  //   if (isShowDetail) {
  //     setActiveKey(activeKeys);
  //   } else {
  //     setCheckDrawerBool(false)
  //   }
  // }, [isShowDetail]);

  /**
   * @description 折叠面板全选于反选
   * @param clickType 类型
   */
  // const collAllRemove = (clickType: string) => {
  //   if (clickType == 'allOpen') {
  //     setActiveKey(activeKeys);
  //   }
  //   if (clickType == 'allClose') {
  //     setActiveKey([]);
  //   }
  // };

  /**
   * 折叠面板改变
   * @param keys 面板KEY
   */
  // const onChangeActivekey = (keys: string | string[]) => {
  //   setActiveKey(Array.isArray(keys) ? keys : [keys]);
  // };

  /**抽屉title全展按钮**/
  // const extraRender = () => (
  //   <Space>
  //     <Button
  //       type={!activeKey.length ? 'dashed' : 'primary'}
  //       size={'small'}
  //       icon={<DoubleLeftOutlined className={`conmpanyCollapseExtra`} />}
  //       className="manageBtntTxtStyle"
  //       onClick={() => {
  //         collAllRemove('allClose');
  //       }}
  //       disabled={!activeKey.length ? true : false}
  //     >
  //       全部折叠
  //     </Button>
  //     <Button
  //       type={activeKey.length ? 'dashed' : 'primary'}
  //       size={'small'}
  //       icon={<DoubleRightOutlined className={`conmpanyCollapseExtra`} />}
  //       className="manageBtntTxtStyle"
  //       onClick={() => {
  //         collAllRemove('allOpen');
  //       }}
  //       disabled={activeKey.length == 2 ? true : false}
  //     >
  //       全部展开
  //     </Button>
  //   </Space>
  // );

  /** 详情接口回调 */
  const detailCallback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
    } else {
      message.error(res?.msg);
    }
  };

  /** 获取详情接口 */
  const { getTempByIdInfo, getTempByIdLoading, getTempByIdRun } = getTempByIdService(detailCallback);

  useEffect(() => {
    if (recordObj && recordObj?.id) {
      getTempByIdRun({
        id: recordObj?.id,
      });
    }
  }, [recordObj]);

  return (
    <>
      <Drawer
        className={pageStyles['detailDrawerDes']}
        title="范本详情"
        style={{ position: 'absolute', height: '100%', overflow: 'hidden' }}
        placement="right"
        onClose={onClose}
        open={isShowDetail}
        getContainer={false}
        width={document.body?.clientWidth * 0.45}
        bodyStyle={{ padding: 0 }}
        closable={false}
        destroyOnClose={true}
        // extra={extraRender()}
      >
        <Spin spinning={getTempByIdLoading}>
          <div
            className={Cls('commonDrawerBodyDom')}
            id={tempContractCheckDomID}
            style={{
              // height: checkDrawerBool ? `calc(100% - 225px)` : `100%`,
              height: `100%`,
            }}
          >
            <div className="drawerBodyInfoDom">
              <ScrollBarLayout style={{ padding: '5px 10px' }}>
                <DetailDrawerInfoView curRes={curRes} tempDetailInfo={getTempByIdInfo} />
                {/* <Collapse
                  bordered={false}
                  className={pageStyles['commonCollapse']}
                  expandIconPosition="end"
                  activeKey={activeKey}
                  onChange={onChangeActivekey}
                  expandIcon={({ isActive }) => {
                    return <CaretRightOutlined rotate={isActive ? 90 : 0} />;
                  }}
                >
                  <Panel
                    header={<Divider orientation="left">{'基本信息'}</Divider>}
                    key={'templDetailBasics'}
                    className="formCollapsePanelBox"
                  >
                    <DetailDrawerInfoView tempDetailInfo={recordObj} />
                  </Panel>

                  <Panel
                    header={<Divider orientation="left">{'审核记录'}</Divider>}
                    key={'tempDetailCheck'}
                    className="formCollapsePanelBox"
                  >
                    <DetailDrawerCheckListView checkInfoList={mMaterialChecks} />
                  </Panel>
                </Collapse> */}
              </ScrollBarLayout>
            </div>
            {/* <div className="drawerBottomBtn">
              <Space>
                <Button
                  icon={<SendOutlined />}
                  type="primary"
                  loading={false}
                  onClick={() => {
                    setPublishModalBool(true)
                  }}
                >
                  发布
                </Button>

                <Button
                  icon={<FileProtectOutlined />}
                  type="primary"
                  loading={false}
                  onClick={() => {
                    setCheckDrawerBool(true);
                  }}
                >
                  审核
                </Button>
              </Space>
            </div> */}
          </div>
        </Spin>
      </Drawer>

      {/* 详情审核表单 */}
      {/* <DetailDrawerCheckFormView
        isShowDrawer={checkDrawerBool}
        onClose={() => {
          setCheckDrawerBool(false);
        }}
        tempDetailInfo={recordObj}
        detailDomId={tempContractCheckDomID}
      /> */}

      {/* 发布提示框 */}
      {publishModalBool && (
        <TipsErrorModalNew
          ref={tipErrorModalRef}
          modalLoading={false}
          onClose={() => {
            setPublishModalBool(false);
          }}
          modalOnOK={() => {}}
          tipTextColor="#000"
          modalTip={
            <div>
              确认是否发布【<span style={{ color: 'red' }}>{recordObj?.fullName || '--'}</span>】范本?
            </div>
          }
        />
      )}
    </>
  );
};
